<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品列表页</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/released.css">
</head>

<body>
  <div class="container">
    <h3 class="container-title">商品列表页</h3>

    <!-- 已选标签 -->
    <div class="selected-label">
      <label>已选标签：</label>
      <div class="selected-label-wrap"></div>
    </div>

    <div class="select-label">
      <div class="label-item select-category">
        商品分类：
        <a href="javascript:void(0);" class="label-value" data-type="category" data-value="服装">服装</a>
        <a href="javascript:void(0);" class="label-value" data-type="category" data-value="玩具">玩具</a>
        <a href="javascript:void(0);" class="label-value" data-type="category" data-value="电子产品">电子产品</a>
      </div>
      <div class="label-item select-trademark">
        商品类型：
        <a href="javascript:void(0);" class="label-value" data-type="trademark" data-value="TM">TM标</a>
        <a href="javascript:void(0);" class="label-value" data-type="trademark" data-value="R">R标</a>
      </div>
      <div class="label-item select-isnew">
        商品成色：
        <a href="javascript:void(0);" class="label-value" data-type="isnew" data-value="新品">新品</a>
        <a href="javascript:void(0);" class="label-value" data-type="isnew" data-value="二手">二手</a>
      </div>
    </div>

    <!-- 商品列表 —— 开始 -->
    <div class="list-wrap">

    </div>
    <!-- 商品列表 —— 结束 -->


  </div>






  <script src="js/superJquery.js"></script>
  <script>
    var $listWrap = $(".list-wrap");
    var $selectedLabelWrap = $(".selected-label-wrap");

    //取出本地数据
    var goodsList = ls.getItem("goodsList") ? ls.getItem("goodsList") : [];

    $listWrap.innerHTML = getGoodsListHTML(goodsList);
    // 返回删除后的 goodsList
    goods_deleted();


    /* 删filter 改map
    *
    *   改就是讲数据对象改成 html
    *
    * 列表的功能？
    * 筛选？按价格排序？搜索？
    *   */
    var $categoryBtns = $(".select-category a");
    var $trademarkBtns = $(".select-isnew a");
    var $isnewBtns = $("select-isnew a");

    var selectedObj = {
      category: "",
      trademark: "",
      isNew: ""
    }

    /* 给筛选项添加点击事件  */
    var $labelItemA = $(".label-item a");
    $labelItemA.forEach(function (adom) {
      adom.onclick = function () {
        var { type, value } = this.dataset;
        /* 充分利用自己知道的信息 类型 类型对应的值 */
        $labelItemA.forEach(function (dom) {
          if (dom.dataset.type == type) {
            dom.classList.remove("label-active");
          }
        });
        this.classList.add("label-active");
        selectedObj[type] = value;

        // 根据 selectedObj 将已选标签展示出来
        // keys 将 selectedObj 返回一个数组
        $selectedLabelWrap.innerHTML = Object.keys(selectedObj).map(function (key) {
          return selectedObj[key] !== ""
            ?
            `
            <a href="javascript:;" data-type="${key}" data-value="${selectedObj[key]}">${selectedObj[key]}</a>
            `
            :
            "";
        }).join("");

        //显示选中的列表，其它隐藏
        judgmentClick(this);
      }
    });


    // 判断显示点击按钮的，其它的隐藏
    function judgmentClick(odom) {
      var $list_item = $(".list-item");
        // console.log(odom.dataset.value);
      $list_item.forEach(function(value, index) {
        // 先全部隐藏
        $list_item[index].classList.add("list-active");
        if (value.getElementsByTagName("span")[6].innerHTML === odom.dataset.value
          || value.getElementsByTagName("span")[5].innerHTML === odom.dataset.value
          || value.getElementsByTagName("span")[2].innerHTML === odom.dataset.value
        ) {
          $list_item[index].classList.remove("list-active");
        }
        
      })
    }



    //添加商品信息到 列表页
    function getGoodsListHTML(list) {
      return list.map(function (goods) {
        return `
    <div class="list-item">
      <label>商品编号：<span>${goods.id}</span></label>
      <label>商品名称：<span>${goods.name}</span></label>
      <label>商品类别：<span>${goods.category}</span></label>
      <label>商品单价：<span>${goods.price}<strong>￥</strong></span></label>
      <label>商品库存：<span>${goods.count}</span></label>
      <label>商品类型：<span>${goods.trademark}</span></label>
      <label>商品成色：<span>${goods.isNew}</span></label>
      <label>商品描述：<span>${goods.des}</span></label>
      <i class="list-item-deleted" data-type="del">删除</i>
    </div>
        `;
      }).join("");
    }


    // 删除列表 方法
    function goods_deleted() {

      var $list_item_deleted = $(".list-item-deleted");
      // 将可迭代对象转为真实的数组对象， 防止 .map 遍历报错
      var arr = Array.from($list_item_deleted);
      arr.map(function (adom) {
        adom.addEventListener("click", function () {
          // console.log(this.parentNode);
          var id_product = parseInt(this.parentNode.getElementsByTagName("span")[0].innerHTML);

          this.parentNode.parentNode.removeChild(this.parentNode);

          // 遍历goodsList 寻找id = id_product 的数组
          var num = 0;
          goodsList.forEach(function (value, index) {
            if (value.id === id_product) {
              num = index;
            }
          })
          var temp = goodsList;
          temp.splice(num, 1);
          ls.setItem("goodsList", temp);

        })
      })
    }





  </script>


</body>

</html>